<template>
  <div class="points-signin-rule">
    <el-card>
      <div class="header">
        <span>积分签到配置</span>
        <el-button type="primary" @click="save">保存</el-button>
        <el-button @click="reset">重置</el-button>
      </div>
      <el-divider>每日签到奖励</el-divider>
      
      <!-- 快速设置 -->
      <div class="quick-settings">
        <span class="quick-label">快速设置：</span>
        <el-button size="small" @click="showMixedDialog">积分经验设置</el-button>
        <el-divider direction="vertical" />
        <el-button size="small" type="warning" @click="resetToDefault">重置为默认</el-button>
      </div>
      
      <!-- 积分经验设置对话框 -->
      <el-dialog v-model="mixedDialogVisible" title="积分经验设置" width="600px" class="quick-set-dialog">
        <div class="dialog-description">
          <el-icon color="#409eff"><InfoFilled /></el-icon>
          <span>分别设置积分和经验值的模式，可以组合不同的设置方式。点击预览可查看效果（预览时会关闭弹窗，5秒后重新打开让您决定是否应用）。</span>
        </div>
        <el-form :model="mixedConfig" label-width="120px" style="margin-top: 16px;">
          <el-divider>积分设置</el-divider>
          <el-form-item label="积分模式">
            <el-select v-model="mixedConfig.pointsMode" style="width: 200px;">
              <el-option label="固定积分" value="fixed" />
              <el-option label="线性递增" value="linear" />
              <el-option label="周末加倍" value="weekend" />
              <el-option label="特殊奖励" value="special" />
            </el-select>
          </el-form-item>
          
          <!-- 固定积分设置 -->
          <div v-if="mixedConfig.pointsMode === 'fixed'">
            <el-form-item label="固定积分值">
              <el-input-number v-model="mixedConfig.fixedPoints" :min="1" style="width: 200px;" />
            </el-form-item>
          </div>
          
          <!-- 线性递增积分设置 -->
          <div v-if="mixedConfig.pointsMode === 'linear'">
            <el-form-item label="起始积分">
              <el-input-number v-model="mixedConfig.linearStartPoints" :min="1" style="width: 200px;" />
            </el-form-item>
            <el-form-item label="积分每日递增">
              <el-input-number v-model="mixedConfig.linearIncrementPoints" :min="0" style="width: 200px;" />
            </el-form-item>
          </div>
          
          <!-- 周末加倍积分设置 -->
          <div v-if="mixedConfig.pointsMode === 'weekend'">
            <el-form-item label="平时积分">
              <el-input-number v-model="mixedConfig.weekdayPoints" :min="1" style="width: 200px;" />
            </el-form-item>
            <el-form-item label="周末积分">
              <el-input-number v-model="mixedConfig.weekendPoints" :min="1" style="width: 200px;" />
            </el-form-item>
          </div>
          
          <!-- 特殊奖励积分设置 -->
          <div v-if="mixedConfig.pointsMode === 'special'">
            <el-form-item label="基础积分">
              <el-input-number v-model="mixedConfig.basePoints" :min="1" style="width: 200px;" />
            </el-form-item>
            <el-form-item label="每3天奖励积分">
              <el-input-number v-model="mixedConfig.day3Points" :min="1" style="width: 200px;" />
            </el-form-item>
            <el-form-item label="每5天奖励积分">
              <el-input-number v-model="mixedConfig.day5Points" :min="1" style="width: 200px;" />
            </el-form-item>
            <el-form-item label="每7天奖励积分">
              <el-input-number v-model="mixedConfig.day7Points" :min="1" style="width: 200px;" />
            </el-form-item>
          </div>
          
          <el-divider>经验值设置</el-divider>
          <el-form-item label="经验模式">
            <el-select v-model="mixedConfig.expMode" style="width: 200px;">
              <el-option label="固定经验" value="fixed" />
              <el-option label="线性递增" value="linear" />
              <el-option label="周末加倍" value="weekend" />
              <el-option label="特殊奖励" value="special" />
            </el-select>
          </el-form-item>
          
          <!-- 固定经验设置 -->
          <div v-if="mixedConfig.expMode === 'fixed'">
            <el-form-item label="固定经验值">
              <el-input-number v-model="mixedConfig.fixedExp" :min="0" style="width: 200px;" />
            </el-form-item>
          </div>
          
          <!-- 线性递增经验设置 -->
          <div v-if="mixedConfig.expMode === 'linear'">
            <el-form-item label="起始经验">
              <el-input-number v-model="mixedConfig.linearStartExp" :min="0" style="width: 200px;" />
            </el-form-item>
            <el-form-item label="经验每日递增">
              <el-input-number v-model="mixedConfig.linearIncrementExp" :min="0" style="width: 200px;" />
            </el-form-item>
          </div>
          
          <!-- 周末加倍经验设置 -->
          <div v-if="mixedConfig.expMode === 'weekend'">
            <el-form-item label="平时经验">
              <el-input-number v-model="mixedConfig.weekdayExp" :min="0" style="width: 200px;" />
            </el-form-item>
            <el-form-item label="周末经验">
              <el-input-number v-model="mixedConfig.weekendExp" :min="0" style="width: 200px;" />
            </el-form-item>
          </div>
          
          <!-- 特殊奖励经验设置 -->
          <div v-if="mixedConfig.expMode === 'special'">
            <el-form-item label="基础经验">
              <el-input-number v-model="mixedConfig.baseExp" :min="0" style="width: 200px;" />
            </el-form-item>
            <el-form-item label="每3天奖励经验">
              <el-input-number v-model="mixedConfig.day3Exp" :min="0" style="width: 200px;" />
            </el-form-item>
            <el-form-item label="每5天奖励经验">
              <el-input-number v-model="mixedConfig.day5Exp" :min="0" style="width: 200px;" />
            </el-form-item>
            <el-form-item label="每7天奖励经验">
              <el-input-number v-model="mixedConfig.day7Exp" :min="0" style="width: 200px;" />
            </el-form-item>
          </div>
        </el-form>
        <template #footer>
          <div style="display: flex; align-items: center; gap: 12px;">
            <el-button @click="mixedDialogVisible = false">取消</el-button>
            <el-button @click="previewMixedMode">预览</el-button>
            <el-button type="primary" @click="applyMixedMode">确定</el-button>
            <span style="color: #909399; font-size: 12px;">预览时会关闭弹窗，5秒后重新打开让您决定是否应用</span>
          </div>
        </template>
      </el-dialog>
      

      

      

      

      
      <!-- 赠送积分合计 -->
      <div class="points-summary">
        <div class="summary-header">
          <el-icon color="#409eff"><InfoFilled /></el-icon>
          <span class="summary-title">赠送积分合计</span>
          <el-tooltip content="积分变化显示负数表示当前设置的总积分比上次保存的设置少，这是正常的。您可以通过快速设置或手动调整来增加积分。" placement="top">
            <el-icon style="margin-left: 8px; color: #909399; cursor: help;"><InfoFilled /></el-icon>
          </el-tooltip>
        </div>
        <div class="summary-content">
          <div class="summary-item">
            <span class="label">连续签到31天：</span>
            <span class="value">{{ totalPoints31Days }} 积分</span>
          </div>
          <div class="summary-item">
            <span class="label">连续签到7天：</span>
            <span class="value">{{ totalPoints7Days }} 积分</span>
          </div>
          <div class="summary-item">
            <span class="label">连续签到30天：</span>
            <span class="value">{{ totalPoints30Days }} 积分</span>
          </div>
          <div class="summary-item">
            <span class="label">连续签到15天：</span>
            <span class="value">{{ totalPoints15Days }} 积分</span>
          </div>
        </div>
        <div class="summary-details">
          <div class="detail-item">
            <span class="detail-label">平均每日积分：</span>
            <span class="detail-value">{{ averagePointsPerDay }} 积分</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">最高单日积分：</span>
            <span class="detail-value">{{ maxPointsPerDay }} 积分</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">最低单日积分：</span>
            <span class="detail-value">{{ minPointsPerDay }} 积分</span>
          </div>

          <div class="detail-item">
            <span class="detail-label">总经验值：</span>
            <span class="detail-value">{{ totalExp31Days }} 经验</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">平均每日经验：</span>
            <span class="detail-value">{{ averageExpPerDay }} 经验</span>
          </div>
        </div>

      </div>
      
      <el-table :data="signinList" style="width: 100%; margin-bottom: 24px;">
        <el-table-column prop="day" label="天数" width="80">
          <template #default="scope">第{{ scope.row.day }}天</template>
        </el-table-column>
        <el-table-column prop="points" label="奖励积分" width="180">
          <template #default="scope">
            <el-input-number v-model="scope.row.points" :min="0" @change="updateSummary" />
          </template>
        </el-table-column>
        <el-table-column prop="exp" label="奖励经验" width="180">
          <template #default="scope">
            <el-input-number v-model="scope.row.exp" :min="0" />
          </template>
        </el-table-column>
        <el-table-column label="累计积分" width="120">
          <template #default="scope">
            <span class="cumulative-points">{{ getCumulativePoints(scope.row.day) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="累计经验" width="120">
          <template #default="scope">
            <span class="cumulative-exp">{{ getCumulativeExp(scope.row.day) }}</span>
          </template>
        </el-table-column>
      </el-table>
      
      <el-divider>补签设置</el-divider>
      <el-form :model="patchConfig" label-width="200px" style="max-width: 700px;">
        <el-form-item label="连续签到天数获得补签机会">
          <el-input-number v-model="patchConfig.continuousDays" :min="1" :max="31" />
          <span style="margin-left:8px;">天获得</span>
          <el-input-number v-model="patchConfig.rewardTimes" :min="1" :max="31" />
          <span style="margin-left:8px;">次补签机会</span>
        </el-form-item>
        <el-form-item label="每月最多获得补签机会次数">
          <el-input-number v-model="patchConfig.maxRewardPerMonth" :min="1" :max="31" />
          <span style="margin-left:8px;">次</span>
        </el-form-item>
        <el-form-item label="每月最多使用补签次数">
          <el-input-number v-model="patchConfig.maxUsePerMonth" :min="1" :max="31" />
          <span style="margin-left:8px;">次</span>
        </el-form-item>
        <el-form-item label="补签活动说明">
          <div class="editor-wrapper">
            <quill-editor v-model:content="patchConfig.desc" contentType="html" />
          </div>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { QuillEditor } from '@vueup/vue-quill'
import { InfoFilled } from '@element-plus/icons-vue'
import '@vueup/vue-quill/dist/vue-quill.snow.css'

const defaultSigninList = Array.from({ length: 31 }, (_, i) => ({ day: i + 1, points: 10, exp: 0 }))
const signinList = ref(defaultSigninList.map(item => ({ ...item })))

const defaultPatchConfig = {
  continuousDays: 7,
  rewardTimes: 1,
  maxRewardPerMonth: 3,
  maxUsePerMonth: 3,
  desc: '<p>补签说明：连续签到满7天可获得1次补签机会，每月最多获得3次、使用3次补签机会。</p>'
}
const patchConfig = reactive({ ...defaultPatchConfig })

// 计算属性
const totalPoints31Days = computed(() => {
  return signinList.value.reduce((sum, item) => sum + item.points, 0)
})

const totalPoints7Days = computed(() => {
  return signinList.value.slice(0, 7).reduce((sum, item) => sum + item.points, 0)
})

const totalPoints30Days = computed(() => {
  return signinList.value.slice(0, 30).reduce((sum, item) => sum + item.points, 0)
})

const totalPoints15Days = computed(() => {
  return signinList.value.slice(0, 15).reduce((sum, item) => sum + item.points, 0)
})

const averagePointsPerDay = computed(() => {
  const total = totalPoints31Days.value
  return Math.round(total / 31)
})

const maxPointsPerDay = computed(() => {
  return Math.max(...signinList.value.map(item => item.points))
})

const minPointsPerDay = computed(() => {
  return Math.min(...signinList.value.map(item => item.points))
})

// 经验值计算属性
const totalExp31Days = computed(() => {
  return signinList.value.reduce((sum, item) => sum + item.exp, 0)
})

const averageExpPerDay = computed(() => {
  const total = totalExp31Days.value
  return Math.round(total / 31)
})

// 获取累计积分
const getCumulativePoints = (day: number) => {
  return signinList.value.slice(0, day).reduce((sum, item) => sum + item.points, 0)
}

// 获取累计经验
const getCumulativeExp = (day: number) => {
  return signinList.value.slice(0, day).reduce((sum, item) => sum + item.exp, 0)
}



// 更新统计信息
const updateSummary = () => {
  // 这里可以添加额外的更新逻辑，比如保存到本地存储或发送到服务器
  console.log('积分配置已更新')
}

// 对话框显示状态
const mixedDialogVisible = ref(false)



const mixedConfig = reactive({
  pointsMode: 'fixed',
  expMode: 'fixed',
  // 固定设置
  fixedPoints: 15,
  fixedExp: 0,
  // 线性递增设置
  linearStartPoints: 10,
  linearIncrementPoints: 2,
  linearStartExp: 0,
  linearIncrementExp: 1,
  // 周末加倍设置
  weekdayPoints: 10,
  weekendPoints: 25,
  weekdayExp: 0,
  weekendExp: 5,
  // 特殊奖励设置
  basePoints: 10,
  day3Points: 15,
  day5Points: 20,
  day7Points: 30,
  baseExp: 0,
  day3Exp: 5,
  day5Exp: 10,
  day7Exp: 15
})

// 显示对话框方法
const showMixedDialog = () => {
  mixedDialogVisible.value = true
}





// 混合设置方法
const getPointsByMode = (index: number, mode: string, config: any) => {
  switch (mode) {
    case 'fixed':
      return config.fixedPoints
    case 'linear':
      return config.linearStartPoints + index * config.linearIncrementPoints
    case 'weekend':
      return (index + 1) % 7 === 0 || (index + 1) % 7 === 6 
        ? config.weekendPoints 
        : config.weekdayPoints
    case 'special':
      let points = config.basePoints
      if ((index + 1) % 7 === 0) points = config.day7Points
      else if ((index + 1) % 5 === 0) points = config.day5Points
      else if ((index + 1) % 3 === 0) points = config.day3Points
      return points
    default:
      return 10
  }
}

const getExpByMode = (index: number, mode: string, config: any) => {
  switch (mode) {
    case 'fixed':
      return config.fixedExp
    case 'linear':
      return config.linearStartExp + index * config.linearIncrementExp
    case 'weekend':
      return (index + 1) % 7 === 0 || (index + 1) % 7 === 6 
        ? config.weekendExp 
        : config.weekdayExp
    case 'special':
      let exp = config.baseExp
      if ((index + 1) % 7 === 0) exp = config.day7Exp
      else if ((index + 1) % 5 === 0) exp = config.day5Exp
      else if ((index + 1) % 3 === 0) exp = config.day3Exp
      return exp
    default:
      return 0
  }
}

const applyMixedMode = () => {
  signinList.value = signinList.value.map((item, index) => ({
    ...item,
    points: getPointsByMode(index, mixedConfig.pointsMode, mixedConfig),
    exp: getExpByMode(index, mixedConfig.expMode, mixedConfig)
  }))
  
  mixedDialogVisible.value = false
  ElMessage.success('积分经验设置已应用，请查看下方统计信息')
}

const previewMixedMode = () => {
  const previewList = signinList.value.map((item, index) => ({
    ...item,
    points: getPointsByMode(index, mixedConfig.pointsMode, mixedConfig),
    exp: getExpByMode(index, mixedConfig.expMode, mixedConfig)
  }))
  
  const originalList = [...signinList.value]
  signinList.value = previewList
  
  // 关闭弹窗，让用户能看到下面的内容
  mixedDialogVisible.value = false
  
  // 显示预览提示
  ElMessage({
    message: '预览效果已显示，5秒后重新打开设置弹窗',
    type: 'warning',
    duration: 5000,
    showClose: true
  })
  
  setTimeout(() => {
    signinList.value = originalList
    // 重新打开弹窗让用户决定是否应用
    mixedDialogVisible.value = true
    ElMessage.info('预览结束，请决定是否应用设置')
  }, 5000)
}

// 重置为默认设置
const resetToDefault = () => {
  signinList.value = defaultSigninList.map(item => ({ ...item }))
  ElMessage.success('已重置为默认设置')
}



function save() {
  ElMessage.success('保存成功（mock）')
}
function reset() {
  signinList.value = defaultSigninList.map(item => ({ ...item }))
  Object.assign(patchConfig, defaultPatchConfig)
  ElMessage.info('已重置')
}



// 组件挂载时初始化
onMounted(() => {
  updateSummary()
})
</script>

<style scoped>
.points-signin-rule { padding: 32px; }
.header { display: flex; justify-content: flex-start; align-items: center; gap: 16px; margin-bottom: 12px; }

.quick-settings {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 16px;
  background-color: #f5f7fa;
  border-radius: 8px;
  border: 1px solid #e4e7ed;
}

.quick-settings :deep(.el-divider--vertical) {
  margin: 0 8px;
  height: 20px;
}

.quick-label {
  color: #606266;
  font-size: 14px;
  font-weight: 500;
}

.points-summary {
  margin-bottom: 16px; 
  padding: 16px; 
  background-color: #f0f9ff; 
  border: 1px solid #b3d8ff; 
  border-radius: 8px;
}

.summary-header {
  display: flex; 
  align-items: center; 
  gap: 8px; 
  margin-bottom: 12px;
}

.summary-title {
  color: #409eff; 
  font-weight: 500; 
  font-size: 16px;
}

.summary-content {
  display: flex; 
  gap: 24px; 
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.summary-item {
  display: flex; 
  align-items: center; 
  gap: 8px;
}

.label {
  color: #666; 
  font-size: 14px;
}

.value {
  color: #409eff; 
  font-weight: 600; 
  font-size: 16px;
}

.summary-details {
  display: flex; 
  gap: 24px; 
  padding-top: 12px; 
  border-top: 1px solid #d1e7ff;
  flex-wrap: wrap;
}

.detail-item {
  display: flex; 
  align-items: center; 
  gap: 8px;
}

.detail-label {
  color: #666; 
  font-size: 13px;
}

.detail-value {
  color: #409eff; 
  font-weight: 500; 
  font-size: 14px;
}



.cumulative-points {
  color: #409eff;
  font-weight: 500;
}

.cumulative-exp {
  color: #67c23a;
  font-weight: 500;
}

.editor-wrapper :deep(.ql-toolbar),
.editor-wrapper :deep(.ql-container) {
  border-radius: 0;
  margin-left: 0;
  width: 100%;
}
.editor-wrapper {
  width: 100%;
}



/* 对话框样式 */
.quick-set-dialog :deep(.el-dialog__body) {
  padding: 20px 24px;
}

.dialog-description {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background-color: #f0f9ff;
  border-radius: 6px;
  color: #606266;
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .summary-content {
    flex-direction: column;
    gap: 12px;
  }
  
  .summary-details {
    flex-direction: column;
    gap: 8px;
  }
  
  .quick-settings {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}
</style> 